<template>
  <div class="logistics">
    <el-timeline>
      <el-timeline-item :timestamp="item.status" placement="top" v-for="(item, index) in activities" :key="index">
        <el-card>
          <h4>{{ item.areaName }}</h4>
          <h5 style="margin: 10px 0;">{{ item.context }}</h5>
          <h5>{{ item.ftime }}</h5>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <!--处理弹出框-->
    <div class="official">
      <el-dialog title="提示" :visible.sync="deteleVisible" :before-close="deteleClose" round>
        <div class="official-title">{{ deteleTitle }}</div>
        <div class="official-attachment">
          <!-- <div class="list" @click="deteleClose">取消</div> -->
          <div class="list"  @click="deteleClose" style="background: #3DA8F5;">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  commonKuaidi
} from '@/api/common'

export default {
  data() {
    return {
      logisticsNo: '',
      logisticsId: '',
      //---------
      activities: [],
      deteleVisible: false,
      deteleTitle: ''
    };
  },
  created() {
    this.logisticsId = this.$route.query.logisticsId
    this.logisticsNo = this.$route.query.logisticsNo
    this.commonKuaidiMet()
  },
  methods: {
    commonKuaidiMet() {
      let params = {
        logisticsId: this.logisticsId,
        logisticsNo: this.logisticsNo
      }

      commonKuaidi(params).then(res => {
        if (res.errorCode == null) {
          if (!res.resultData.data) {
            this.deteleTitle = res.resultData.message
            this.deteleVisible = true;

            console.log('出发')
            return
          }

          this.activities = res.resultData.data
        }
      })
    },

    deteleClose() {
      this.deteleVisible = false;

      this.$router.push({
        path: '/order/merchandise/merchandise-self/merchandise-self-support'
      })
    },
  }
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/official.less");

.logistics {
  /deep/ .el-timeline-item__timestamp {
    font-weight: bold;
    color: #000;
  }
}
</style>